<script setup>
import {
    Management,
    Promotion,
    UserFilled,
    User,
    Crop,
    EditPen,
    SwitchButton,
    CaretBottom
} from '@element-plus/icons-vue'
import { userInfoService } from '@/api/user.js';
import { useUserInfoStore } from '@/stores/userInfo.js';
import { useTokenStore } from '@/stores/token.js';
const userInfoStore = useUserInfoStore();
const tokenSrore = useTokenStore();

// 调用获取用户详细信息接口并将其存进pinia中
const getUserInfo = async () => {
    let result = await userInfoService();
    userInfoStore.setInfo(result.data);
}
getUserInfo()

// 模型模板2
const initLive2DWidget1 = () => {
    const name = "miku";
    setTimeout(() => {
        window.L2Dwidget.init({
            //设置Live2D插件的根路径
            pluginRootPath: 'live2dw/',
            // 插件的JavaScript文件路径设
            pluginJsPath: 'lib/',
            // 模型资源的相对路径设
            pluginModelPath: 'live2d-widget-model-' + name + '/assets/',
            //表示使用标签模式
            tagMode: true,
            //关闭调试信息输出
            debug: false,
            //指定模型文件的路径
            model: {
                // 模型文件路径
                jsonPath: '/live2dw/live2d-widget-model-' + name + '/assets/' + 'miku' + '.model.json',
                scale: 0.7 //模型缩放比例
            },
            //配置模型展示的位置
            display: {
                position: "right", //模型的位置（左or右）
                width: 300, //模型宽度
                height: 600, //模型高度
                hOffset: -20, //模型水平偏移量
                vOffset: -60 //模型垂直偏移量
            },
            // 允许移动端展示
            mobile: {
                show: true
            }
        });
    }, 2000);
};
import { ElMessage, ElMessageBox } from 'element-plus'
import router from '@/router';
// 绑定点击目录触发的事件函数
const handleCommand = (command) => {
    if (command === 'logout') {
        ElMessageBox.confirm(
            '你确定退出登录吗？',
            '请注意！！！',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消退出',
                type: 'warning',
            }
        )
            .then(async () => {
                //退出登录
                // 清空pinia库数据以及跳转到登录页面
                tokenSrore.removeToken();
                userInfoStore.removeInfo();
                router.push('/login');
                ElMessage({
                    type: 'success',
                    message: '退出登录成功！',
                })
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '退出登录失败！',
                })
            })
    } else {
        router.push('/' + command);
    }
}
//绑定回到首页事件
const arrIndex = ()=> {
    ElMessage.success('欢迎回到首页')
    router.push('/')
}
</script>

<template>
    <el-container class="layout-container">
        <!-- 左侧菜单 -->
        <el-aside width="200px">
            <div class="el-aside__logo"></div>
            <el-menu active-text-color="blue" background-color="#F2FAFC" text-color="#000" router>
                <el-menu-item index="/articleManage">
                    <el-icon>
                        <Crop />
                    </el-icon>
                    <span>文章管理</span>
                </el-menu-item>
                <el-menu-item index="/userManage">
                    <el-icon>
                        <User />
                    </el-icon>
                    <span>用户管理</span>
                </el-menu-item>
                <el-menu-item index="/commentManage">
                    <el-icon>
                        <Promotion />
                    </el-icon>
                    <span>评论管理</span>
                </el-menu-item>
                <el-menu-item index="/permissionManage">
                    <el-icon>
                        <Management />
                    </el-icon>
                    <span>权限管理</span>
                </el-menu-item>
                <el-sub-menu>
                    <template #title>
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>个人中心</span>
                    </template>
                    <el-menu-item index="/userInfoManage">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>基本资料</span>
                    </el-menu-item>
                    <el-menu-item index="/userAvatar">
                        <el-icon>
                            <Crop />
                        </el-icon>
                        <span>更换头像</span>
                    </el-menu-item>
                    <el-menu-item index="/userPwd">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        <span>更改密码</span>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-aside>
        <!-- 右侧主区域 -->
        <el-container>
            <!-- 头部区域 -->
            <el-header>
                <div>广州理工学院：<strong>{{ userInfoStore.info.nickname ? userInfoStore.info.nickname :
                    userInfoStore.info.username
                        }}</strong></div>
                <el-dropdown placement="bottom-end" @command="handleCommand">
                    
                    <span class="el-dropdown__box">
                        <el-button type="primary" @click="arrIndex()"
                        style="margin-right: 10px;margin-top: 5px;">回到首页</el-button>
                        <el-avatar :src="userInfoStore.info.userPic ? userInfoStore.info.userPic : avatar" />
                        <el-icon>
                            <CaretBottom />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="userInfoManage" :icon="User">基本资料</el-dropdown-item>
                            <el-dropdown-item command="userAvatar" :icon="Crop">更换头像</el-dropdown-item>
                            <el-dropdown-item command="userPwd" :icon="EditPen">更改密码</el-dropdown-item>
                            <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
            <!-- 中间区域 -->
            <el-main>
                <router-view></router-view>
            </el-main>
            <!-- 底部区域 -->
            <el-footer>个人博客系统 ©2024 Created by 广理喜多川</el-footer>
        </el-container>
    </el-container>
</template>

<style lang="scss" scoped>
/* 抽屉样式 */
.avatar-uploader {
    :deep() {
        .avatar {
            width: 60px;
            height: 60px;
            border-radius: 45%;
            display: block;
        }

        .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }

        .el-upload:hover {
            border-color: var(--el-color-primary);
        }

        .el-icon.avatar-uploader-icon {
            font-size: 14px;
            color: #fff;
            width: 60px;
            height: 60px;
            border-radius: 45%;
            text-align: center;
        }
    }
}

.layout-container {
    height: 100vh;

    .el-aside {
        background-color: #F2FAFC;

        &__logo {
            height: 130px;
            // 系统logo头像地址
            background: url('@/assets/logo.png') no-repeat center / 230px auto;
            background-color: #F2FAFC;
            opacity: 0.78;
        }

        .el-menu {
            border-right: none;
        }
    }

    .el-header {
        background-color: #F2FAFC;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .el-dropdown__box {
            display: flex;
            align-items: center;

            .el-icon {
                color: #999;
                margin-left: 10px;
            }

            &:active,
            &:focus {
                outline: none;
            }
        }
    }

    .el-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #666;
    }
}
</style>